<template>
  <div style="">
    <Header :left="true" leftText="返回" title="完成任务"> </Header>
    <van-dialog
      v-model="showDialog"
      title="查询"
      show-cancel-button
      confirm-button-text="确认"
      cancel-button-text="取消"
      @confirm="query"
      style="height"
    >
      <Form :style="autoHeight">
        <van-field readonly clickable name="timeStr" :value="valueStr" label="开始时间" placeholder="点击选择日期" @click="openStartTime" />
        <van-calendar
          v-model="showCalendarStr"
          @confirm="onConfirmStr"
          :min-date="minDate"
          :max-date="maxDate"
          @closed="startConcel"
          @unselect="startReset"
        />
        <van-field readonly clickable name="timeEnd" :value="valueEnd" label="结束时间" placeholder="点击选择日期" @click="openEndTime" />
        <van-calendar
          v-model="showCalendarEnd"
          @confirm="onConfirmEnd"
          :min-date="minDate"
          :max-date="maxDate"
          @unselect="endReset"
          @closed="endConcel"
        />
      </Form>
    </van-dialog>
    <div>
      <van-button round :block="true" class="button" :hairline="false" color="#138087" text="查询" @click="queryDiag" />
    </div>
    <div style="margin-top:8px;">
      <canvas id="myChart" height="200"></canvas>
    </div>
    <div>
      <div class="selectdTextScroll">
        <v-table :columns="tableColums" :table-data="tableData" :show-vertical-border="true"></v-table>
        <!-- 分页控件 -->
      </div>
    </div>
    <div>
      <van-pagination
        width="this.screenWidth"
        class="pagination"
        force-ellipses
        v-model="queryParams.pageNum"
        :total-items="queryParams.total"
        @change="pgn_change"
        :items-per-page="queryParams.pageSize"
        style="margin-bottom:30px"
      />
    </div>
  </div>
</template>

<script>
import {
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Picker,
  popup,
  SubmitBar,
  Divider,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  Calendar,
  Pagination,
} from 'vant'
import 'vue-easytable/libs/themes-base/index.css'
import { VTable } from 'vue-easytable'
import { storage } from '@/libs/utils'
import { _httpClient } from '@/libs/api'
import { getToken, getBaseApiFrefix } from '@/libs/auth'
import Header from '@/components/header.vue'
import F2 from '@antv/f2'

Vue.use(Loading)
Vue.use(Field)
Vue.use(Button)
Vue.use(Divider)
Vue.use(Picker)
Vue.use(popup)
Vue.use(SubmitBar)
Vue.use(Form)
Vue.use(Calendar)
Vue.use(Pagination)
Vue.use(Dialog)

export default {
  name: 'qualityInspection',
  components: { Header, Form, Cell, Icon, Field, NumberKeyboard, VTable, Dialog, Toast },
  data: function() {
    return {
      data: [],
      tableColums: [
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      autoHeight: {
        height: '',
      },
      form: { siteKey: null, qsTime: null, qeTime: null, userName: null },
      valueStr: '',
      showCalendarStr: false,
      valueEnd: '',
      showCalendarEnd: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 11, 31),
      tableData: [],
      subButton: true,
      showDialog: false,
      user: {},
      tableColums: [
        {
          field: 'seq',
          title: '序号',
          width: 50,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'table-title-class',
        },
        {
          field: 'taskCode',
          title: '任务编码',
          width: 130,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'table-title-class',
        },
        {
          field: 'taskType',
          title: '任务类型',
          width: 80,
          titleAlign: 'center',
          columnAlign: 'center',
          titleCellClassName: 'table-title-class',
        },
        {
          field: 'createTime',
          title: '创建时间',
          width: 200,
          titleAlign: 'center',
          columnAlign: 'left',
          titleCellClassName: 'table-title-class',
        },
      ],
    }
  },
  //页面初始化监听事件
  created: function() {
    this.autoHeight.height = '150px'
    this.user = JSON.parse(storage.get('user'))
    this.form.userName = this.user.userName
    this.query()
  },
  //页面初始化完成监听事件
  mounted: function() {},
  methods: {
    pgn_change() {
      this.queryTable()
    },
    drawChart(value) {
      // Step 1: 创建 Chart 对象
      const chart = new F2.Chart({
        id: 'myChart',
        pixelRatio: window.devicePixelRatio, // 指定分辨率
      })
      // Step 2: 载入数据源
      chart.source(value)
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart
        .interval()
        .position('department*num')
        .color('department')

      // Step 4: 渲染图表
      chart.render()
    },
    queryDiag() {
      this.showDialog = true
    },
    formatDate(date) {
      let year = date.getFullYear()
      let mouth = date.getMonth() + 1
      if (mouth < 10) {
        mouth = '0' + mouth
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + mouth + '-' + day
    },
    //清空开始时间
    startReset() {
      this.valueStr = ''
      this.form.qsTime = ''
      this.autoHeight.height = '150px'
    },
    //清空结束时间
    endReset() {
      this.valueEnd = ''
      this.form.qeTime = ''
      this.autoHeight.height = '150px'
    },

    //开始时间取消
    startConcel() {
      // this.valueStr = ''
      this.autoHeight.height = '150px'
    },
    //结束时间取消
    endConcel() {
      // this.valueEnd = ''
      this.autoHeight.height = '150px'
    },

    //打开开始时间选择
    openStartTime() {
      this.showCalendarStr = true
      this.autoHeight.height = '450px'
    },

    //打开结束时间选择
    openEndTime() {
      this.showCalendarEnd = true
      this.autoHeight.height = '450px'
    },
    onConfirmStr(date) {
      this.valueStr = this.formatDate(date)
      this.form.qsTime = this.valueStr
      this.showCalendarStr = false
      this.autoHeight.height = '150px'
    },
    onConfirmEnd(date) {
      this.valueEnd = this.formatDate(date)
      this.form.qeTime = this.valueEnd
      this.showCalendarEnd = false
      this.autoHeight.height = '150px'
    },
    async query() {
      let _this = this
      try {
        let res = await _httpClient.post(_httpClient.getApiPrefix() + '/app/finishtask/taskInfo/bar', {
          body: { siteKey: _this.form.siteKey, qsTime: _this.form.qsTime, qeTime: _this.form.qeTime, userName: _this.form.userName },
        })
        if (res.code === 200) {
          _this.data = res.rows
          _this.drawChart(_this.data)
          // 表格数据
          _this.queryTable()
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },
    async queryTable() {
      let _this = this
      try {
        // 表格数据
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + '/app/finishtask/taskInfo/list?pageNum=' + _this.queryParams.pageNum + '&pageSize=' + _this.queryParams.pageSize,
          {
            body: { siteKey: _this.form.siteKey, qsTime: _this.form.qsTime, qeTime: _this.form.qeTime, userName: _this.form.userName },
          }
        )
        if (res.code === 200) {
          if (res.rows.length == 0) {
            Toast('无数据');
            return
          }
          _this.tableData = res.rows
          _this.queryParams.total = res.total
        } else {
          alert(res.msg)
        }
      } catch (e) {
        alert(JSON.stringify(e))
      }
    },
  },
}
</script>
<style>
body {
  background-color: white;
}
.table-title-class {
  background-color: #304156;
  color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.button {
  /* position: relative; */
  top: 8px;
  left: 75%;
  width: 20%;
  height: 30px;
  background-color: #f22028;
  border-color: #f22028;
}
.selectdTextScroll {
  display: inline-block;
  /* position: fixed; */
  top: 9rem;
  overflow: scroll;
  right: 0;
  width: 95%;
  margin-bottom: 0.5rem;
  height: 250px;
  z-index: 1;
}
#myChart{
  width: 100%;
}
.pagination {
  position: fixed;
  bottom: -15px;
  width: 100%;
  color: rgb(0, 0, 255);
  text-align: center;
}
</style>
